import React, { useState } from'react';
import { Button, TextField, Typography } from '@mui/material';
import { useNavigate } from'react-router-dom';


import './login.scss';
import http from '../../utils/http'


import '../../../public/vite.svg'


const Login:React.FC = () => {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');

       const navigate = useNavigate();
        const handleLogin=async()=>{
            console.log('1111111',username,password)
        const res=await http.post('/api/login',{
            username,
            password

        })
        console.log(res)
        if(res.status===200 && res.data.code===10000){
            localStorage.setItem("accessToken", res.data.data.accessToken);
        // refreshToken 刷新令牌
        localStorage.setItem("refreshToken", res.data.data.refreshToken);
         //获取用户信息
        const userInfo = {
          avator: res.data.data.userInfo.avator,
          username: res.data.data.userInfo.username,
        };
       
         

        localStorage.setItem("userInfo", JSON.stringify(userInfo));
            navigate('/home')
           alert('登录成功')
      
        }
        else{
            alert('登录失败')
        }
         
        }

    const handleReset = () => {
        setUsername('');
        setPassword('');
    };

          return (

        <div className='login' style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh'  }}>
            <div className='login-container' >
                      <div className='login-img-container'> <img src="../../../public/login/login1.jpg" alt="" className='login-img' /></div>
                 
             
                
                <Typography variant="h4" align="center" gutterBottom className='login-title'>
                    Hooks-Admin
                </Typography>
                <TextField className='login-input'
                    label="用户名"
                    variant="outlined"
                    fullWidth
                    margin="normal"
                     name="username"
                    value={username}
                    onChange={(e)=>setUsername(e.target.value)}
                />
                <TextField className='login-input'
                    label="密码"
                    variant="outlined"
                    fullWidth
                    margin="normal"
                    type="password"
                     name="password"
                    value={password}
                    onChange={(e)=>setPassword(e.target.value)}
                />
                
                                    <Button
                        className='login-button1'
                        variant="outlined"
                        fullWidth
                        onClick={handleReset}
                        style={{ marginTop: '10px' }}
                    >
                        login.reset
                    </Button>
                      
                <Button
    className='login-button1'
    variant="contained"
    color="primary"
    fullWidth
    onClick={handleLogin}
    style={{ marginTop: '10px' }}
>
    login.confirm
</Button>
               
            </div>
        </div>
    
    );
      
}

 


export default Login;